﻿@namespace BlazorFluentUI
@inherits ResponsiveComponentBase

<LocalCS @bind-Rules="@DropdownLocalRules" />

<div class="ms-Dropdown-root"
     style=@Style
     @ref=@RootElementReference>
    @if (this.Label != null)
    {
        <Label ClassName="ms-Dropdown-label" HtmlFor=@id Required=@Required>
            @Label
        </Label>
    }
    <KeytipData Disabled=@Disabled>
        <div style=@Style
             tabindex=@(Disabled ? -1 : 0)
             id=@id
             data-is-focusable="true"
             aria-expanded=@(IsOpen ? "true" : "false")
             aria-label=@AriaLabel
             aria-labelledby=@(Label != null ? id+"-label" : null)
             aria-describedby="?"
             aria-activedescendant="?"
             aria-required=@Required
             aria-disabled=@Disabled
             aria-owns=@(IsOpen ? id + "-list" : null)
             @onclick=@ClickHandler
             @onkeydown=@KeydownHandler

             class=@($"ms-Dropdown mediumFont {(IsOpen?"is-open":"")} {(this.Label!=null ? "has-label" : "")} {(Disabled?"is-disabled":"")} {(Required?"is-required":"")} {(SelectedOptions.Count() == 0 && SelectedOption == null ?"has-placeholder":"")} {(ErrorMessage != null ?"has-error":"")}")>
            <span id=@($"{id}-option")
                  class="ms-Dropdown-title"
                  aria-atomic="true"
                  role="menuitem">
                @if (SelectedOptions.Count() > 0)
                {
                    <span>@String.Join(", ", SelectedOptions.Select(x => x.Text))</span>
                }
                else if (SelectedOption != null)
                {
                    <span>@SelectedOption.Text</span>
                }
                else
                {
                    if (this.Placeholder != null)
                    {
                        <span>@this.Placeholder</span>
                    }
                }
            </span>
            <span style="display: inline-block" class="ms-Dropdown-caretDownWrapper">
                <Icon IconName="chevron_down" ClassName="ms-Dropdown-caretDown" />
            </span>
        </div>
    </KeytipData>

    <Panel IsOpen=@((int)CurrentMode <= (int)ResponsiveMode.Medium && IsOpen) IsLightDismiss="true" OnDismiss=@DismissHandler HasCloseButton="false">
        <div class="ms-Dropdown-itemsWrapper"
             @ref="panelReference"
             tabindex="0">
            @*FocusZone has no Role=listbox *@
            <FocusZone Direction="FocusZoneDirection.Vertical"
                          ClassName="ms-Dropdown-dropdownItems"
                          AriaLabel=@($"{id}-label")>

                <CascadingValue Value=@this>
                    @if (ItemsSource != null)
                    {
                        foreach (var item in ItemsSource)
                        {
                            @ItemTemplate!(item)
                        }
                    }
                    else
                    {
                        @ChildContent
                    }
                </CascadingValue>

            </FocusZone>
        </div>
    </Panel>
    @if (IsOpen)
    {
        //render container
        @if ((int)CurrentMode <= (int)ResponsiveMode.Medium)
        {

        }
        else
        {
            <Callout IsBeakVisible="false"
                        GapSpace="0"
                        DoNotLayer="false"
                        DirectionalHintFixed="false"
                        DirectionalHint=@(this.DirectionalHint ?? BlazorFluentUI.DirectionalHint.BottomLeftEdge)
                        ClassName="ms-Dropdown-callout"
                        FabricComponentTarget=@this
                        OnDismiss=@DismissHandler
                        OnPositioned=@OnPositioned
                        CalloutWidth=@(DropdownWidth == 0 ? (int)dropDownBounds.Width : DropdownWidth)
                        CalloutMaxHeight=@DropdownHeight>
                <div class="ms-Dropdown-itemsWrapper"
                     @ref="calloutReference"
                     tabindex="0">

                    <FocusZone Direction="FocusZoneDirection.Vertical"
                                  @ref="calloutFocusZone"
                                  ClassName="ms-Dropdown-dropdownItems"
                                  AriaLabel=@($"{id}-label")>
                        <CascadingValue Value=@this>
                            @if (ItemsSource != null)
                            {
                                foreach (var item in ItemsSource)
                                {
                                    @ItemTemplate!(item)
                                }
                            }
                            else
                            {
                                @ChildContent
                            }
                        </CascadingValue>
                    </FocusZone>
                </div>
            </Callout>

        }
    }
    @if (ErrorMessage != null)
    {
        <div class="ms-Dropdown-errorMessage">@ErrorMessage</div>
    }


</div>

